import React from 'react';

import './static/css/search.css';

import {Link} from 'react-router';
import axios from 'axios';

class Search extends React.Component{
    constructor(props){
        super(props);
		this.state={
			list:[]
		}
		
        this.keyup=this.keyup.bind(this);
    }
    keyup(e){
		var that=this;
        if(e.keyCode==13){
            var result=this.refs.products.value;
			if(result.length!=0){
				axios.post('http://127.0.0.1:2000/api/searchproduct',{title:result})
            		.then(function (response) {
						   that.setState({
							   list:response.data.result
						   })

               		})
            		.catch(function (error) {
                		console.log(error);
           			});        
       			}
			}else{
				that.setState({
					list:[]
				})
			}
         	
    }
    
    render(){
        return(
            <div>
                <header className="header3">
                    <Link to="/Home"><span className="left-icon">&lt;</span></Link>
                   
                        <input type="text" name="" ref="products" placeholder="请输入商品名称" onKeyUp={this.keyup}/>
                   
                </header>

               <div className="shoplistse">
		<ul>
			<li>分类</li>
			<li>排序</li>
			<li>筛选</li>
		</ul>
       
			{this.state.list.map(function(value,key){
				return <section className="list clearfix" key={key}>
					<Link to={{pathname:"/Detail/"+value._id}}>
					<div className="list-img"><img src={`http://127.0.0.1:2000/${value.img}`} alt=""/></div>
					<div className="listtxt">
               			<h3>{value.title} </h3>
               			<div className="txt1"><img src="start.jpg"/>月售744单</div>
               			<div className="txt2 clearfix">
                   			<div className="txt2-money">
                       			<span>¥{value.price}起送  /</span>
                       			<span>配送费¥3 /</span>
                       			<span>¥13/人</span>
                   			</div>
                   			<div className="txt2-time">
                        		<span>2.48km</span><span>47分钟</span>
                   			</div>
               			</div>
            		</div>
					</Link>
          	</section>
			})}
            	
            	
        	
    </div>
            </div>
        )
    }
}

export default Search;